<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Curriculum vitae</title>
    <link rel="stylesheet" href="curriculum vitae.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="curriculum vitae.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>
      <div data-title='浪起来' class="vue" @click="lang">点我浪起来</div>
      <div data-title='低调' class="vue1" @click="stop">点我低调</div>

      <div class="tab">
        <label class="label label-style" date-item="0">简介</label>
        <label class="label" date-item="1">求职欲</label>
        <label class="label" date-item="2">轮播图</label>
        <label class="label" date-item="3">表单</label>
      </div>
      <div class="wrapper">
        <!-- 头部简介 -->
        <section class="section">
          <h3 class="head_jl">个人简介</h3>
          <nav class="nav">
            <h6 class="head head_name">
              <span>姓名:</span><span>吴航锋</span>
            </h6>
            <h6 class="head head_phone">
              <span>电话:</span><span>138 5808 9629</span>
            </h6>

            <h6 class="head head_study"><span>学历:</span><span>本科</span></h6>

            <h6 class="head head_email">
              <span>邮箱:</span
              ><a href="nicehangfeng@foxmail.com">nicehangfeng@foxmail.com</a>
            </h6>
            <h6 class="head head_job">
              <span>求职意向:</span><span>web前端开发(实习)</span>
            </h6>
            <h6 class="head head_github">
              <span>Github:</span
              ><a href="https://github.com/hangfengnice" target="_blank"
                >hangfengnice</a
              >
            </h6>
          </nav>
        </section>

        <!-- 对话框 求职意向 -->
        <section>
          <h4 class="msg-nav">求职欲</h4>

          <ul class="msg-list">
            <li class="msg-item">
              <img
                class="msg-avator"
                src="https://upload-images.jianshu.io/upload_images/5547112-b4602c2afd7b12ee.png"
                alt="head"
              />

              <div class="msg-info">
                <h3 class="msg-user">
                  <span class="msg-name">Boss</span>
                  <span class="msg-time">5月1日 09:00</span>
                </h3>
                <p class="msg-txt">
                  为什么转行web前端
                </p>
              </div>
            </li>
            <li class="msg-item" date-self>
              <img
                class="msg-avator"
                src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
                alt="head"
              />

              <div class="msg-info">
                <h3 class="msg-user">
                  <span class="msg-name">奋斗的娃</span>
                  <span class="msg-time">5月1日 09:00</span>
                </h3>
                <p class="msg-txt">
                  学习后能感到快乐，有成就感
                </p>
              </div>
            </li>

            <li class="msg-item">
              <img
                class="msg-avator"
                src="https://upload-images.jianshu.io/upload_images/5547112-b4602c2afd7b12ee.png"
                alt="head"
              />

              <div class="msg-info">
                <h3 class="msg-user">
                  <span class="msg-name">Boss</span>
                  <span class="msg-time">5月1日 09:01</span>
                </h3>
                <p class="msg-txt">
                  你有什么优势
                </p>
              </div>
            </li>
            <li class="msg-item" date-self>
              <img
                class="msg-avator"
                src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
                alt="head"
              />

              <div class="msg-info">
                <h3 class="msg-user">
                  <span class="msg-name">奋斗的娃</span>
                  <span class="msg-time">5月1日 09:01</span>
                </h3>
                <p class="msg-txt">
                  算是体验过生活，能够作出行动，变得更好
                </p>
              </div>
            </li>
            <li class="msg-item" date-self>
              <img
                class="msg-avator"
                src="https://tva1.sinaimg.cn/crop.0.0.750.750.180/006bQeGsjw8f1tgl7z9ncj30ku0kuq44.jpg"
                alt="head"
              />

              <div class="msg-info">
                <h3 class="msg-user">
                  <span class="msg-name">奋斗的娃</span>
                  <span class="msg-time">5月1日 09:01</span>
                </h3>
                <p class="msg-txt">
                  我会是你找到最好的同伴之一
                </p>
              </div>
            </li>
          </ul>
        </section>
        <!-- 轮播图小展示 -->
        <section>
          <h4 class="msg-nav">简易轮播图手点</h4>

          <div class="v_show">
            <div class="v_caption">
              <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
              <div class="highlight_tip">
                <span date-index="0" class="current">1</span>
                <span date-index="1">2</span>
                <span date-index="2">3</span>
                <span date-index="3">4</span>
              </div>

              <em class="v_more"><a href="#">更多>></a></em>
            </div>

            <div class="v_content">
              <div class="v_content_list">
                <div class="change_btn">
                  <span class="prev">上一幅</span>
                  <span class="next">下一幅</span>
                </div>
                <ul>
                  <li class="li_show">
                    <a href="#"
                      ><img
                        src="https://upload-images.jianshu.io/upload_images/5547112-b4602c2afd7b12ee.png"
                        alt="重庆李子"
                    /></a>
                    <h4><a href="">重庆李子</a></h4>
                    <span>播放：<em>1314</em></span>
                  </li>
                  <li>
                    <a href="#"
                      ><img
                        src="https://upload-images.jianshu.io/upload_images/5547112-12d6ef4701672453.jpg"
                        alt="贰厂"
                    /></a>
                    <h4><a href="">贰厂</a></h4>
                    <span>播放：<em>1314</em></span>
                  </li>
                  <li>
                    <a href="#"
                      ><img
                        src="https://upload-images.jianshu.io/upload_images/5547112-c372f8976232d30d.png"
                        alt="九华里"
                    /></a>
                    <h4><a href="">九华里</a></h4>
                    <span>播放：<em>1314</em></span>
                  </li>
                  <li>
                    <a href="#"
                      ><img
                        src="https://upload-images.jianshu.io/upload_images/5547112-7185ea90b7d1c73a.png"
                        alt="凤巢"
                    /></a>
                    <h4><a href="">凤巢</a></h4>
                    <span>播放：<em>1314</em></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- 表单 -->
        <section>
          <form action="" novalidate class="form-head">
            <fieldset>
              <legend align="center">登录</legend>
              <p>
                <input
                  class="input-required"
                  placeholder="账号/手机"
                  required
                  name="account"
                  id="username"
                  autofocus
                  tabindex="2"
                />
              </p>
              <p>
                <input
                  class="input-required"
                  id="password"
                  type="password"
                  placeholder="密码"
                  required
                  id="password"
                  name="password"
                  tabindex="3"
                /><a href="">忘记密码</a>
              </p>
              <p>
                <input
                  type=""
                  class="input-required"
                  placeholder="验证码"
                  required
                  tabindex="4"
                /><img
                  src=""
                  alt="验证码"
                  class="captcha-img"
                  autocomplete="off"
                />
              </p>
              <button type="submit">登录</button>
              <a href="">立即注册</a>
            </fieldset>
          </form>
        </section>
      </div>

      <footer id="footer" @mouseenter.native="stop">
        <a href="https://github.com/hangfengnice" target="_blank">使劲戳我</a>
      </footer>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "欢 迎 您 的 到 来 ",
          intervalid: null
        },
        methods: {
          lang() {
            if (this.intervalid != null) return;
            this.intervalid = setInterval(() => {
              var start = this.msg.substring(0, 1);
              var end = this.msg.substring(1);
              this.msg = end + start;
            }, 400);
          },
          stop() {
            clearInterval(this.intervalid);
            this.intervalid = null;
            this.msg = "欢 迎 您 的 到 来 ";
          }
        }
      });
    </script>
  </body>
</html>


